<template>
	<view class="peopleapply_wrapper">
		<custom-nav title="香港移民申请" themeColor="#fff"></custom-nav>
		<view class="people_apply_header">
			<image class="image" src="/static/img/apply/applybg.png"></image>
		</view>
		<view class="people_apply_content">
			<view class="apply-form-wrapper">
				<view class="apply-form">
					<up-form labelPosition="top" :model="model1" :rules="rules" ref="uFormRef">
						<view class="apply-form-section">
							<up-form-item required label="申请人姓名:" borderBottom prop="name" ref="item1"
								labelWidth="auto">
								<up-input v-model="model1.name" border="none" placeholder="请输入申请人姓名"></up-input>
							</up-form-item>
							<up-form-item required label="性别:" borderBottom prop="sex" ref="item1" labelWidth="auto">
								<!-- <up-input v-model="model1.name" border="none" placeholder="请输入性别"></up-input> -->
								<view class="flex-r">
									<up-radio-group v-model="model1.sex" placement="row" @change="groupChange">
										<!-- 1男   2女 -->
										<up-radio :customStyle="{marginLeft: '4px'}" activeColor="#FF7139" name="1"
											label="男">
										</up-radio>
										<up-radio :customStyle="{marginLeft: '4px'}" activeColor="#FF7139" name="2"
											label="女">
										</up-radio>
									</up-radio-group>
								</view>
							</up-form-item>
							<up-form-item required label="婚姻状况:" @click="handleShowmajor" borderBottom prop="marriage_type_name"
								labelWidth="auto">
								<up-input readonly v-model="model1.marriage_type_name" border="none" placeholder="请选择"></up-input>
								<template #right>
									<up-icon name="arrow-right"></up-icon>
								</template>
							</up-form-item>
							<up-form-item required label="最高学历:" @click="handleShowHigh" borderBottom prop="first_education_name"
								labelWidth="auto">
								<up-input readonly v-model="model1.first_education_name" border="none" placeholder="请选择"></up-input>
								<template #right>
									<up-icon name="arrow-right"></up-icon>
								</template>
							</up-form-item>
							<up-form-item required label="内地高考:" borderBottom prop="collegeExamination" ref="exam" labelWidth="auto">
								<up-input v-model="model1.collegeExamination" border="none"
									placeholder="请输入"></up-input>
								<!-- 								<template #right>
									<up-icon name="arrow-right" @click="handleShowExam"></up-icon>
								</template> -->
							</up-form-item>
							<up-form-item required label="IBDP:" borderBottom prop="ibdp" ref="item1"
								labelWidth="auto">
								<up-input v-model="model1.ibdp" border="none" placeholder="请输入"></up-input>
							</up-form-item>
							<up-form-item required label="HKDSE:" borderBottom prop="hkdse" ref="item1"
								labelWidth="auto">
								<up-input v-model="model1.hkdse" border="none" placeholder="请输入"></up-input>
							</up-form-item>
							<up-form-item required label="IAL:" borderBottom prop="ial" ref="item1"
								labelWidth="auto">
								<up-input v-model="model1.ial" border="none" placeholder="请输入"></up-input>
							</up-form-item>
							<up-form-item required label="其他:" borderBottom prop="other" ref="item1"
								labelWidth="auto">
								<up-input v-model="model1.other" border="none" placeholder="请输入"></up-input>
							</up-form-item>
						</view>

					</up-form>

				</view>
			</view>
		</view>
		<view class="apply-btn-wrapper" v-if="!id">
			<view class="apply-btn" @click="handleSave">
				<text>保存</text>
			</view>
		</view>
		<up-picker :show="showMarrySelect" :columns="marriageTypeLists" keyName="name" @confirm="handleConfirm"
			@cancel="()=>{showMarrySelect=false}"></up-picker>
		<up-picker :show="showHighSelect" :columns="educationLists" keyName="name" @confirm="handleConfirmHigh"
			@cancel="()=>{showHighSelect=false}"></up-picker>
		<up-picker :show="showExamSelect" :columns="examList" @confirm="handleConfirmExam"
			@cancel="()=>{showExamSelect=false}"></up-picker>

	</view>
</template>

<script setup>
	import customNav from '../../../components/custom-nav.vue'
	// import form from '../../../uni_modules/uview-plus/libs/config/props/form';
	import {onLoad} from "@dcloudio/uni-app"
	import {
		ref,
		getCurrentInstance
	} from "vue"
import form from '../../../uni_modules/uview-plus/libs/config/props/form';
	const {
		proxy
	} = getCurrentInstance()
	// 表单引用  
	const uFormRef = ref(null);
	const id = ref("")
	const model1 = ref({
		name: "",
		sex: "",
		marriage_type_name: "",
		first_education_name: "",
	})
	onLoad((e)=>{
		console.log('e: ', e)
		if(e&&e.id){
			id.value = e.id
			getDetails()
		}
		
	})
	// 获取项目详情
	function getDetails() {
		proxy.$request({
			url: 'api/User/getMyApplyDetail',
			header:"application/x-www-form-urlencoded",
			data: {order_id:id.value}
		}).then(res => {
			model1.value = res.data
			model1.value.sex = res.data.sex+''
		})
	}
	const rules = {
		name: {
			type: 'string',
			required: true,
			message: '请填写姓名',
			trigger: ['blur', 'change'],
		},
		sex: {
			type: 'string',
			max: 1,
			required: true,
			message: '请选择男或女',
			trigger: ['blur', 'change']
		},
		marriage_type_name: {
			required: true,
			message: '请选择婚姻状况',
			trigger: ['blur', 'change']
		},
		first_education_name: {
			required: true,
			message: '请选择最高学历',
			trigger: ['blur', 'change']
		},
		collegeExamination: {
			required: true,
			message: '请输入内地高考',
			trigger: ['blur', 'change']
		},
		ibdp: {
			required: true,
			message: '请输入IBDP',
			trigger: ['blur', 'change']
		},
		hkdse: {
			required: true,
			message: '请输入HKDSE',
			trigger: ['blur', 'change']
		},
		ial: {
			required: true,
			message: '请输入IAL',
			trigger: ['blur', 'change']
		},
		other: {
			required: true,
			message: '请输入其他',
			trigger: ['blur', 'change']
		}
	}
	const marriageTypeLists = ref([])
	const educationLists = ref([])
	const showMarrySelect = ref(false)
	const showHighSelect = ref(false)
	const showExamSelect = ref(false)
	const examList = ref([
		[
			'内地高考1',
			'内地高考2',
			'内地高考t'
		]
	])

	function groupChange() {}

	function handleShowExam() {}

	function handleSave() {
		uFormRef.value.validate().then(valid => {
			if (valid) {
				proxy.$request({
					url: 'api/Service/applyService',
					header: "application/x-www-form-urlencoded",
					data: {...model1.value,service_id:1}
				}).then(res => {
					if (res.code == 0) {
						return proxy.$toast(res.msg)
					} else {
						proxy.$toast(res.msg)
						setTimeout(()=>{
							uni.switchTab({
								url:"/pages/serve/serve"
							})
						},1500)
					}
				})
			} else {
				uni.$u.toast('校验失败')
			}
		}).catch(() => {
			// 处理验证错误  
			uni.$u.toast('校验失败')
		});
	}

	function getDict() {
		// 婚姻状况列表
		proxy.$request({
			url: 'api/Service/getMarriageTypeLists',
			header: "application/x-www-form-urlencoded",
			data: {
				lang: 1,
			}
		}).then(res => {
			if (res.code == 0) {
				return proxy.$toast(res.msg)
			} else {
				marriageTypeLists.value = [res.data]
			}
		})
		// 最高学历
		proxy.$request({
			url: 'api/Service/getEducationLists',
			header: "application/x-www-form-urlencoded",
			data: {
				lang: 1,
			}
		}).then(res => {
			if (res.code == 0) {
				return proxy.$toast(res.msg)
			} else {
				educationLists.value = [res.data]
			}
		})
	}
	getDict()

	function handleShowmajor() {
		showMarrySelect.value = true
	}

	function handleConfirm(e) {
		console.log('e: ', e)
		model1.value.marriage_type_id = e.value[0].id
		model1.value.marriage_type_name = e.value[0].name
		uFormRef.value.validateField('marriage_type_name');  
		showMarrySelect.value = false
	}

	function handleShowHigh() {
		showHighSelect.value = true
	}

	function handleConfirmHigh(e) {
		model1.value.first_education_id = e.value[0].id
		model1.value.first_education_name = e.value[0].name
		  if (uFormRef.value) {  
		      uFormRef.value.validateField('first_education_name');  
		    }  
		showHighSelect.value = false
	}

	function handleConfirmExam(e) {
		model1.value.exam = e.value[0]
		showExamSelect.value = false
	}
</script>

<style lang="scss" scoped>
	.flex-r{
	width: 100%;
	display: flex;
	
	::v-deep .u-radio-row{
		justify-content: flex-end !important;
	}
	::v-deep .u-radio-group{
		justify-content: flex-end !important;
	}
	}
	.peopleapply_wrapper {
		padding-top: 370rpx;

		.people_apply_header {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;

			.image {
				height: 414rpx;
				width: 100%;
			}
		}

		.people_apply_content {
			padding: 0 32rpx;
			position: relative;
			background: #fff;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;

			.apply-form-wrapper {
				padding-bottom: 200rpx;
			}

			// padding-bottom: 100rpx;
		}

		.apply-btn-wrapper {
			position: fixed;
			bottom: 0;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 200rpx;
			z-index: 19;

			.apply-btn {
				margin: 0 auto;
				height: 96rpx;
				background: linear-gradient(128deg, #FF9839 0%, #FF7139 100%);
				border-radius: 200rpx;
				width: 686rpx;
				text-align: center;
				font-size: 32rpx;
				color: #fff;
				line-height: 96rpx;
			}

			// background: rgba(0,0,0,);
		}
	}
</style>